import {
	ref
} from 'vue';

import {
	BASE_URL
} from "../../config/config.js"

import {
	useUserStore
} from '../../stores/useUserStore';

import {
	useCategoryApis
} from '../../request/category.api.js';
import {
	useDishesApis
} from '../../request/dishes.api';


export const useController = () => {

	const userStore = useUserStore();
	const categoryApis = useCategoryApis();
	const dishesApis = useDishesApis();

	const formData = ref({
		categoryId: '',
		name: '',
		description: '',
		picture: '',
		thumbnail: '',
	});

	const categoryList = ref([]);

	const fileList = ref([]);
	const action = BASE_URL + '/api/dishes/images';
	const header = {
		authorization: userStore.token,
	};


	function getCategoryList() {
		categoryApis.getCategoryList().then((data) => {
			const list = data.map((item) => ({
				label: item.name,
				value: item.id
			}));
			categoryList.value = list;
		});
	}

	function createDish() {
		const {
			categoryId,
			name,
			description,
			picture,
			thumbnail
		} = formData.value;

		return dishesApis.createDish({
			categoryId,
			name,
			description,
			picture,
			thumbnail,
		});
	}

	return {

		formData,
		categoryList,
		fileList,
		action,
		header,

		getCategoryList,
		createDish,
	}
}